<script setup>
import {ref} from "vue";
import {BaseImgUrl} from "../../utils/lshttp";
import {pxToRpx} from "../../utils/utils";
import {conUtils} from "../../utils/conUtils";
import {onLoad} from "@dcloudio/uni-app";

const isShowMD = ref(false)
const isShoXRMDMD = ref(false)
const isShowGXNCZ = ref(false)
const isShowOldUser = ref(false)

const giffList = ref([
  {"name": "惊喜红包", "date": "2024-12-12", "money": "7"},
  {"name": "月会员卡", "date": "2024-12-26", "money": "7"},
  {"name": "打车券", "date": "2024-12-31", "money": "7"},
  {"name": "寄小二优惠券", "date": "2024-12-06", "money": "7"},
])

const animationData = ref()
const isShowChoose = ref()
const isShowGif = ref(false)

const position = ref()

let animation = uni.createAnimation({
  duration: 300,
  timingFunction: 'ease',
})
// 显示筛选弹框
const showCheckBox = () => {
  isShowChoose.value = !isShowChoose.value
  // animation.rotate(isShowChoose.value ? -180 : 0).step()
  if (isShowChoose.value) {
    scale(0)
    translate(150)
  } else {
    translate(0)
    scale(300)
  }
}
const translate = (timeOut) => {
  setTimeout(() => {
    animation.translate(isShowChoose.value ? prop.positionData.right + prop.positionData.left + 100: 0, isShowChoose.value ? prop.positionData.top : 0).step()
    animationData.value = animation.export()
  }, timeOut)
  if (!isShowGif.value) {
    setTimeout(() => {
      isShowGif.value = true
    }, 200)
  } else {
    isShowGif.value = false
  }
}
const scale = (timeOut) => {
  setTimeout(() => {
    animation.scale(isShowChoose.value ? 0.2 : 1).step()
    animationData.value = animation.export()
  }, timeOut)
}
const prop = defineProps({
  positionData: Object,
})
</script>

<template>
  <u-popup :show="isShowMD" mode="center" :round="10" @close="isShowMD = false" closeable
           :custom-style="{backgroundColor:'#00000000'}">
    <view
        style="background: #2dc19700;width: 100rpx;height: 100rpx;margin: 0 auto 0;z-index: 1;position: absolute;bottom: 0;left: 280rpx"
        @click="isShowMD = false"></view>
    <image :src="BaseImgUrl + '/home/免单.png'" style="width: 660rpx;height: 810rpx;z-index: -1"></image>
  </u-popup>
  <u-popup :show="isShoXRMDMD" mode="center" :round="10" @close="isShoXRMDMD = false" closeable
           :custom-style="{backgroundColor:'#00000000'}">
    <view
        style="background: #2dc19700;width: 300rpx;height: 100rpx;margin: 0 auto 0;z-index: 1;position: absolute;bottom: 0;left: 150rpx"
        @click="isShoXRMDMD = false"></view>
    <image :src="BaseImgUrl + '/home/大转盘.png'" style="width: 600rpx;height: 708rpx;z-index: -1"></image>
  </u-popup>
  <u-popup :show="isShowGXNCZ" mode="center" :round="10" @close="isShowGXNCZ = false" closeable
           :custom-style="{backgroundColor:'#00000000'}">
    <view
        style="background: #2dc19700;width: 100rpx;height: 100rpx;margin: 0 auto 0;z-index: 1;position: absolute;bottom: 0;left:290rpx"
        @click="isShowGXNCZ = false"></view>
    <image :src="BaseImgUrl + '/home/恭喜抽中.png'" style="width: 680rpx;height:890rpx;z-index: -1"></image>
  </u-popup>
  <u-popup :show="isShowOldUser" mode="center" :round="10" @close="isShowOldUser = false" closeable
           :custom-style="{backgroundColor:'#00000000'}">
    <view style="position: absolute;top: 246rpx;left: 184rpx;font-size: 20rpx;font-weight: bold;color: #ffbe63">￥7
    </view>
    <view style="position: absolute;top: 200rpx;left: 290rpx">
      <view v-for="(item,index) in giffList" :key="index" style="margin-bottom: 46rpx">
        <view style="font-weight: bold;font-size: 28rpx;">{{ item.name }}
          <text v-if="index === 0" style="color: #f0592e">{{ item.money }}</text>
          元
        </view>
        <view style="height: 20rpx"></view>
        <view style="font-size: 22rpx;color: #666666" v-if="index !== giffList.length - 1">过期时间：{{ item.date }}
        </view>
      </view>
    </view>
    <view
        style="background: #2dc19700;width: 100rpx;height: 100rpx;margin: 0 auto 0;z-index: 1;position: absolute;bottom: 0;left:290rpx"
        @click="isShowOldUser = false"></view>
    <image :src="BaseImgUrl + '/home/老用户回归.png'" style="width: 680rpx;height:920rpx;z-index: -1"></image>
  </u-popup>
  <view class="dzp"
        :style="{background:isShowChoose ? '#3D3D3D00' : '#3D3D3D33',pointerEvents:isShowChoose ? 'none' : 'auto'}">
    <view style="position: relative;pointer-events: auto" :animation="animationData" @click="showCheckBox">
      <view
          style="background: #2dc19700;width: 300rpx;height: 100rpx;margin: 0 auto 0;z-index: 1;position: absolute;bottom: 0;left: 52rpx"
          @click="showCheckBox"></view>
      <image :src="BaseImgUrl + '/home/大转盘.png'" style="width: 400rpx;height: 460rpx;z-index: -1"
             v-if="!isShowGif"></image>
      <image src="https://lsz.lszbg.com/imgs/gif/立即抽奖.gif" style="width: 600rpx;height: 620rpx;z-index: -1"
             v-if="isShowGif"></image>
    </view>
  </view>
</template>

<style scoped lang="scss">
.dzp {
  z-index: 99;
  position: fixed;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>